<template>
	<view style="margin-top: 20rpx;">
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in list" :key="index"
				 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
					<view class="cu-avatar round lg">
						{{index+1}}
					</view>
					<view class="content">
						<view class="text-grey text-cut" style="padding-left: 6rpx;">Q：{{item.question}}</view>
						<view class="text-gray text-sm text-cut">
							<text class=" margin-right-xs "></text>A：{{item.answer}}</view>
					</view>
					<view class="move">
						<view class="bg-grey" @click="showModal($event,item,index)" data-target="DialogModal1">编辑</view>
						<view class="bg-red" @click="handleDel(index)">删除</view>
					</view>
					
				
				</view>
			</view>

		<view class="noData" v-show="nodata">
			本地缓存的习题已经被删完了,请重新添加~
		</view>
		</scroll-view>
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">编辑</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="cu-form-group">
						<view class="title">题目</view>
						<input placeholder="请输入题目" name="input" v-model="question"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">答案</view>
						<input placeholder="请输入答案" name="input" v-model="answer"></input>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="handleEdit">确定</button>
		
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index:0,
				list:[],
				question:'',
				answer:'',
				modalName: null,
				gridCol: 3,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
			};
		},
		onLoad() {
			
		try {
		    const value = uni.getStorageSync('topicList');
		    if (value) {
		        let parse = JSON.parse(value)
				this.list = [...parse]
		    }
			
		} catch (e) {
		    // error
		}
		},
		computed:{
			nodata(){
				return this.list.length==0?true:false
			}
		},
		methods: {
			handleEdit(){
				if (this.question === '') {
					uni.showToast({
						title: '请输入题目',
						icon: 'none',
						mask: true,
						duration: 1500
					});
					return
				}
				if (this.answer === '') {
					uni.showToast({
						title: '请输入答案',
						icon: 'none',
						mask: true,
						duration: 1500
					});
					return
				}
				this.list[this.index] = {
					question:this.question,
					answer:this.answer,
				}
				uni.setStorageSync('topicList', JSON.stringify(this.list));
				this.hideModal()
				uni.showToast({
					title: '编辑成功',
					mask: true,
					duration: 1000
				});
			},
			handleDel(index){
				this.list.splice(index,1)
				uni.setStorageSync('topicList', JSON.stringify(this.list));
				uni.showToast({
					title: '删除成功',
					mask: true,
					duration: 1000
				});
			},
			showModal(e,item,index) {
				this.modalName = e.currentTarget.dataset.target
				if(this.modalName=='DialogModal1'){
					this.index = index
					this.question = item.question
					this.answer = item.answer
				}
			},
			hideModal(e) {
				this.modalName = null
			},
			Gridchange(e) {
				this.gridCol = e.detail.value
			},
			Gridswitch(e) {
				this.gridBorder = e.detail.value
			},
			MenuBorder(e) {
				this.menuBorder = e.detail.value
			},
			MenuArrow(e) {
				this.menuArrow = e.detail.value
			},
			MenuCard(e) {
				this.menuCard = e.detail.value
			},
			SwitchSex(e) {
				this.skin = e.detail.value
			},

			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

<style lang="less" scoped>
	.noData {
		text-align: center;
		color: #535353;
		margin-top: 50rpx;
	}
	.cu-item {
		border-bottom: 2rpx solid #efefef;
	}
	.cu-list.menu-avatar>.cu-item .content{
		width: calc(100% - 96rpx - 60rpx - 40rpx);
	}
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
